<template>
  <!-- 编辑参数对话框 -->
  <el-dialog
    title="编辑参数"
    :visible="editDialogVisible"
    width="30%"
    :before-close="handleCloseEdit"
  >
    <el-form
      :model="editForm"
      :rules="ruleEditForm"
      ref="EditFormRef"
      label-width="100px"
    >
      <el-form-item label="参数名称" prop="attr_name">
        <el-input type="text" v-model="editForm.attr_name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseEdit">取 消</el-button>
      <el-button type="primary" @click="defineEditPost">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { request } from "@/utils";

export default {
  components: {},
  props: ["editDialogVisible", "tabName", "cateId", "attrId"],
  data() {
    return {
      editForm: {
        attr_name: "",
      },
      ruleEditForm: {
        attr_name: [
          { required: true, message: "请输入新的属性名称", trigger: "blur" },
          { min: 3, max: 9, message: "长度在 3 到 9 个字符", trigger: "blur" },
        ],
      },
      sonTabName: this.tabName,
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleCloseEdit() {
      this.$emit("hanleCloseEdit");
      console.log(this.editForm);
    },
    // 发起请求对参数名称进行编辑
    defineEditPost() {
      this.$refs.EditFormRef.validate(async (v) => {
        if (v) {
          console.log(this.sonTabName);
          await request
            .put(`categories/${this.cateId}/attributes/${this.attrId}`, {
              attr_name: this.editForm.attr_name,
              attr_sel: this.tabName,
            })
            .then(() => {
              // 更新页面数据
              this.$emit("getData", this.tabName, this.cateId);
              this.$refs.EditFormRef.resetFields();
              this.handleCloseEdit();
            });
          return;
        }
        this.$message.error("输入有误");
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
</style>